<script>
import ImagePreview from "@/components/ImagePreview/index.vue";

export default {
  components: {
    ImagePreview,
  },
  name: "CollectBox",
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    content() {
      return this.item.content;
    },
  },
  methods: {
    getContentChild(content, key) {
      return content[key] && content[key].length > 0;
    },
  },
};
</script>


<template>
  <div class="friendCircle-box">
    <!-- 公共删除样式 -->
    <div v-if="item.isDelete" class="common-delete-status"></div>
    <!--头像-->
    <ImagePreview
      :defaultSrc="require('@/static/icon/icon_head_send.png')"
      :src="item.avatar"
      :imageStyle="{ width: '30px', height: '30px' }"
      class="avatar"
    ></ImagePreview>
    <!--    <img :src="item.avatar" class="avatar" />-->
    <div class="friendCircle-content">
      <!-- 昵称 -->
      <div class="content-item">
        <div class="friendCircle-title nickName font-color-1">
          {{ item.userName }}
        </div>
        <div class="friendCircle-text font-color-2">
          {{ content.text }}
        </div>
      </div>
      <!-- 附件：除图片以外 -->
      <div v-if="getContentChild(content, 'file')" class="content-item">
        <div class="friendCircle-title font-color-1">附件：</div>
        <div
          v-for="(fileItem, fileIndex) in content.file"
          :key="fileIndex"
          :class="['friendCircle-file']"
        >
          <div
            v-if="fileItem.type === 'url'"
            class="friendCircle-text font-color-3"
          >
            <a :href="fileItem.value" class="friendCircle-link" target="_blank">
              {{ fileItem.value }}
            </a>
          </div>
        </div>
        <div :class="['friendCircle-image']">
          <template v-for="(fileItem, fileIndex) in content.file">
            <ImagePreview
              v-if="fileItem.type === 'image'"
              :key="fileIndex"
              :src="fileItem.value"
            ></ImagePreview>
          </template>
        </div>
      </div>
      <!-- 原文信息 -->
      <div
        v-if="content.sourceText && content.sourceTitle && content.sourceSend"
        class="content-item"
      >
        <div class="friendCircle-title font-color-1">原文：</div>
        <div v-if="content.sourceText" class="friendCircle-text font-color-3">
          {{ content.sourceText }}
        </div>
        <div v-if="content.sourceText" class="friendCircle-text font-color-3">
          {{ content.sourceTitle }}
        </div>
        <div v-if="content.sourceText" class="friendCircle-text font-color-3">
          {{ content.sourceSend }}
        </div>
      </div>
      <!-- 时间 赞 评论 -->
      <div class="content-item footer">
        <div class="footer-time">{{ item.time }}</div>
        <div class="footer-comment">
          <div class="comment-item">赞（{{ content.likeCount || 0 }}）</div>
          <div class="comment-item">
            评论（{{ content.commentCount || 0 }}）
          </div>
        </div>
      </div>
      <!-- 评论 -->
      <div
        v-if="getContentChild(content, 'comment')"
        class="content-item comment"
      >
        <!-- 标题写死 -->
        <div class="comment-title">评论：</div>
        <template v-for="(commentItem, commentItemIndex) in content.comment">
          <div :key="commentItemIndex" class="comment-box">
            <div class="comment-value">
              <span class="label">{{ commentItem.userName }}:</span>
              {{ commentItem.value }}
            </div>
            <div class="comment-time">{{ commentItem.time }}</div>
          </div>
        </template>
      </div>
      <div
        v-if="content.lon || content.address || content.lat || content.accuracy"
        class="content-item other"
      >
        {{ content.address ? `${content.address} ` : "" }}
        {{ content.lon ? `经度（${content.lon}） ` : "" }}
        {{ content.lat ? `维度（${content.lat}）` : "" }}
        {{ content.accuracy ? `精度（${content.accuracy}）` : "" }}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.friendCircle-image::v-deep {
  display: flex;
  flex-wrap: wrap;

  .imagePreview {
    margin-right: 8px;
    margin-bottom: 8px;
    width: 80px;
    height: 80px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;

    img {
      width: 80px;
    }
  }
}
</style>
